<template>
  <div :style="`font-size: ${titleFontSize}px`" class="box">
    <div class="title">
      <div class="text">
        ▎{{ selectedType.text }}
      </div>
      <div class="select">
        <span v-for="item in data.type"
              :key="item.key"
              @click="selectedType = item">
          {{ item.text }}
        </span>
      </div>
    </div>
    <div ref="chartBox"
         class="echarts-container">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Trend',
  props: {
    data: {
      type: Array | Object,
      default: () => []
    },
  },
  data() {
    return {
      // 图表实例对象
      echarts: null,
      // 图表配置对象
      option: {
        xAxis: {
          type: 'category',
          // 取消间隔
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          left: 40,
          icon: 'circle'
        }
      },
      // 默认选中类型
      selectedType: {},
      // 标题文字大小
      titleFontSize: 0
    }
  },
  watch: {
    data(v) {
      let typeList = v.type
      this.selectedType = typeList && typeList[0] || {}
    },
    // 选项改变时重置数据
    selectedType(v) {
      let showData = this.data[v.key] || []

      let color = [
        ['rgba( 11,168,44,0.5)', 'transparent'],
        ['rgba(44,110,255,0.5)', 'transparent'],
        ['rgba(22,242,217,0.5)', 'transparent'],
        ['rgba(254,33,30,0.5)', 'transparent'],
        ['rgba(250,105,0,0.5)', 'transparent'],
      ]

      let updateOption = {
        xAxis: {data: this.data.common.month},
        series: showData.data.map((item, index) => ({
          type: 'line',
          // 图像堆叠
          stack: '1',
          ...item,
          areaStyle: {
            color: {
              type: 'linear',
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {offset: 0, color: color[index][0]},
                {offset: 1, color: color[index][1]},
              ]
            }
          }
        })),
        legend: {
          data: showData.data.map(i => i.name)
        }
      }
      this.echarts.setOption(updateOption)
    }
  },
  mounted() {
    this.echarts = this.$echarts.init(this.$refs.chartBox, this.$store.state.theme)
    this.echarts.setOption(this.option)
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    // 页面尺寸改变
    resize() {
      let w = this.$refs.chartBox.offsetWidth
      let h = this.$refs.chartBox.offsetHeight
      let titleFontSize = w * 0.04
      this.titleFontSize = titleFontSize
      let updateOption = {
        legend: {
          top: 40 + titleFontSize
        },
        grid: {
          top: 40 + titleFontSize + 40
        }
      }
      this.echarts.setOption(updateOption)
      this.echarts.resize()
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.echarts-container {
  width: 100%;
  height: 100%;
}

.title {
  color: white;
  position: absolute;
  top: 30px;
  left: 40px;
  z-index: 10;
}

.select {
  position: absolute;
  cursor: pointer;
  display: none;
  bottom: 0;
  transform: translateY(100%);
}

.title:hover .select {
  display: block;
}
</style>
